import { createRef, useImperativeHandle, useState } from "react";
import { HashRouter, Route, Routes } from "react-router-dom";
import { ThemeProvider } from "styled-components";
import GlobalStyle from "./components/styled/GlobalStyle";
import Background from "./Layout/Background";
import { lightTheme, darkTheme } from "./theme";
import House from "./Three/House";
import OrbitControl from "./Three/OrbitControl";
import Test from "./Three/Test";
import Try from "./Three/Try";

export const toggleTheme = createRef();

function App() {
  const [mode, setMode] = useState("light");

  useImperativeHandle(
    toggleTheme,
    () => setMode(mode => (mode === "dark" ? "light" : "dark")),
    []
  );

  return (
    <ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
      <HashRouter>
        <GlobalStyle />
        {/* <Header /> */}
        <Routes>
          <Route path='/' element={<Test />} />
          <Route path='/OrbitControl' element={<OrbitControl />} />
          <Route path='/House' element={<House />} />
          <Route path='/Try' element={<Try />} />
        </Routes>
        <Background />
      </HashRouter>
    </ThemeProvider>
  );
}

export default App;
